<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>灰鲸系统后台采集</title>
  <link rel="icon" href="../static/img/huijing_mall.ico" type="image/x-icon">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="../static/css/task.css">
  <style>
    .welcome-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #3b82f6;
      color: white;
      padding: 0.5rem 1rem;
      z-index: 1000;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      position: relative;
      cursor: pointer;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid white;
      object-fit: cover;
      transition: transform 0.3s;
    }

    .user-info:hover .user-avatar {
      transform: scale(1.1);
    }

    .logout-btn {
      background: rgba(255,255,255,0.2);
      color: white;
      border: none;
      padding: 0.25rem 0.75rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.3s;
    }

    .logout-btn:hover {
      background: rgba(255,255,255,0.3);
    }

    /* 用户信息悬浮框 */
    .user-detail {
      position: absolute;
      top: 100%;
      left: 0;
      background: white;
      color: #333;
      padding: 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 200px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      z-index: 1001;
    }

    .user-info:hover .user-detail {
      opacity: 1;
      visibility: visible;
      transform: translateY(5px);
    }

    .user-detail-item {
      display: flex;
      margin-bottom: 0.5rem;
    }

    .user-detail-label {
      font-weight: bold;
      width: 60px;
    }

    .user-detail-value {
      flex: 1;
    }

    /* 头像操作菜单 */
    .avatar-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background: white;
      color: #333;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 150px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      z-index: 1002;
      padding: 0.5rem 0;
    }

    .avatar-menu.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(5px);
    }

    .menu-item {
      padding: 0.5rem 1rem;
      cursor: pointer;
      transition: background 0.2s;
    }

    .menu-item:hover {
      background: #f3f4f6;
    }

    /* 更换头像弹窗 */
    .avatar-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1003;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
    }

    .avatar-modal.show {
      opacity: 1;
      visibility: visible;
    }

    .modal-content {
      background: white;
      padding: 1.5rem;
      border-radius: 0.5rem;
      width: 400px;
      max-width: 90%;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 1rem;
      margin-top: 1.5rem;
    }

    .preview-container {
      width: 150px;
      height: 150px;
      margin: 1rem auto;
      border: 2px dashed #ddd;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
    }

    .preview-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }

    .upload-btn {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: #3b82f6;
      color: white;
      border-radius: 0.25rem;
      cursor: pointer;
      margin-top: 1rem;
    }

    #fileInput {
      display: none;
    }

    .main-content {
      margin-top: 5rem;
    }
  </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

<!-- 固定在顶部的欢迎信息栏 -->
<div id="welcomeBar" class="welcome-bar">
  <div class="user-info" id="userInfo">
    <div class="relative">
      <img id="userAvatar" src="../static/img/defAvatar/default.jpg" alt="用户头像" class="user-avatar">
      <!-- 头像操作菜单 -->
      <div class="avatar-menu" id="avatarMenu">
        <div class="menu-item" id="changeAvatarBtn">更换头像</div>
        <div class="menu-item" id="viewProfileBtn">查看资料</div>
      </div>
    </div>
    <div>
      <div>欢迎 <span id="userNick">加载中...</span></div>
      <div class="text-sm">这是我们相识第 <span id="daysCount">...</span> 天！</div>
    </div>

    <!-- 用户详细信息悬浮框 -->
    <div class="user-detail">
      <div class="user-detail-item">
        <span class="user-detail-label">账号:</span>
        <span id="detailAccount" class="user-detail-value">加载中...</span>
      </div>
      <div class="user-detail-item">
        <span class="user-detail-label">密码:</span>
        <span id="detailPassword" class="user-detail-value">加载中...</span>
      </div>
      <div class="user-detail-item">
        <span class="user-detail-label">昵称:</span>
        <span id="detailNick" class="user-detail-value">加载中...</span>
      </div>
      <div class="user-detail-item">
        <span class="user-detail-label">注册:</span>
        <span id="detailRegDate" class="user-detail-value">加载中...</span>
      </div>
      <div class="user-detail-item">
        <span class="user-detail-label">余额:</span>
        <span id="detailRole" class="user-detail-value">加载中...</span>
      </div>
    </div>
  </div>

  <button id="logoutBtn" class="logout-btn">退出登录</button>
</div>

<!-- 更换头像弹窗 -->
<div class="avatar-modal" id="avatarModal">
  <div class="modal-content">
    <h3 class="text-lg font-bold mb-4">更换头像</h3>
    <p>请选择新的头像图片</p>

    <div class="preview-container">
      <img id="previewImage" class="preview-image" alt="头像预览">
      <div id="defaultPreview" class="w-full h-full flex items-center justify-center text-gray-400">
        预览图将显示在这里
      </div>
    </div>

    <label for="fileInput" class="upload-btn">选择图片</label>
    <input type="file" id="fileInput" accept="image/*">

    <div class="modal-actions">
      <button id="cancelChangeBtn" class="px-4 py-2 border border-gray-300 rounded-md">取消</button>
      <button id="confirmChangeBtn" class="px-4 py-2 bg-blue-500 text-white rounded-md" disabled>确认更换</button>
    </div>
  </div>
</div>

<!-- 以下是原有的页面内容 -->
<div class="main-content bg-white p-8 rounded-lg shadow-lg w-full max-w-2xl">
  <h1 class="text-2xl font-bold mb-6 text-center">发布任务</h1>

  <form id="taskForm" class="space-y-6">
    <!-- 工作城市 -->
    <div>
      <label for="workCity" class="block text-sm font-medium text-gray-700">工作城市</label>
      <input type="text" id="workCity" name="city" required
             class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
             placeholder="请输入工作城市，如：北京">
    </div>

    <!-- 工作类型 -->
    <div>
      <label for="jobTypeInput" class="block text-sm font-medium text-gray-700">工作类型</label>
      <input type="text" id="jobTypeInput" name="jobTypeInput" required
             class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
             placeholder="请输入工作类型，如：互联网开发">
    </div>

    <!-- 技术栈显示 -->
    <div id="techStackDisplay" class="hidden">
      <label class="block text-sm font-medium text-gray-700">技术栈</label>
      <div class="mt-1 p-2 bg-gray-50 border border-gray-300 rounded-md">
        <span id="selectedTechStack" class="text-gray-700"></span>
      </div>
    </div>

    <!-- MySQL 信息显示 -->
    <div id="mysqlInfoDisplay" class="hidden">
      <label class="block text-sm font-medium text-gray-700">MySQL 信息</label>
      <div class="mt-1 p-2 bg-gray-50 border border-gray-300 rounded-md">
        <span id="mysqlInfo" class="text-gray-700"></span>
      </div>
    </div>

    <!-- Redis 信息显示 -->
    <div id="redisInfoDisplay" class="hidden">
      <label class="block text-sm font-medium text-gray-700">Redis 信息</label>
      <div class="mt-1 p-2 bg-gray-50 border border-gray-300 rounded-md">
        <span id="redisInfo" class="text-gray-700"></span>
      </div>
    </div>

    <!-- 是否使用 MySQL -->
    <div>
      <label class="block text-sm font-medium text-gray-700">是否使用 MySQL</label>
      <div class="mt-2 space-x-4">
        <label class="inline-flex items-center">
          <input type="radio" id="mysqlYes" name="mysql" value="yes" class="form-radio text-blue-500" disabled>
          <span class="ml-2">是</span>
        </label>
        <label class="inline-flex items-center">
          <input type="radio" id="mysqlNo" name="mysql" value="no" checked class="form-radio text-blue-500" disabled>
          <span class="ml-2">否</span>
        </label>
      </div>
    </div>

    <!-- 是否使用 Redis -->
    <div>
      <label class="block text-sm font-medium text-gray-700">是否使用 Redis</label>
      <div class="mt-2 space-x-4">
        <label class="inline-flex items-center">
          <input type="radio" id="redisYes" name="redis" value="yes" class="form-radio text-blue-500" disabled>
          <span class="ml-2">是</span>
        </label>
        <label class="inline-flex items-center">
          <input type="radio" id="redisNo" name="redis" value="no" checked class="form-radio text-blue-500" disabled>
          <span class="ml-2">否</span>
        </label>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div>
      <button type="submit"
              class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        提交
      </button>
    </div>
  </form>
</div>

<!-- 原有的弹窗内容保持不变 -->
<!-- 工作类型弹窗 -->
<div id="jobTypeModal" class="modal">
  <h2 class="text-xl font-bold mb-4">选择技术栈</h2>
  <div class="space-y-4">
    <select id="techStackSelect" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
      <option value="go">Go</option>
      <option value="java">Java</option>
      <option value="c++">C++</option>
      <option value="python">Python</option>
      <option value="前端js">前端 JavaScript</option>
      <option value="vue">Vue.js</option>
      <option value="nodejs">Node.js</option>
    </select>
  </div>
  <button onclick="saveTechStack()"
          class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    确认
  </button>
</div>

<!-- MySQL 弹窗 -->
<div id="mysqlModal" class="modal">
  <h2 class="text-xl font-bold mb-4">MySQL 信息</h2>
  <div class="space-y-4">
    <div>
      <label for="mysqlHost" class="block text-sm font-medium text-gray-700">主机</label>
      <input type="text" id="mysqlHost" name="mysqlHost"
             class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
    <div>
      <label for="mysqlUser" class="block text-sm font-medium text-gray-700">用户名</label>
      <input type="text" id="mysqlUser" name="mysqlUser"
             class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
    <div>
      <label for="mysqlPassword" class="block text-sm font-medium text-gray-700">密码</label>
      <input type="password" id="mysqlPassword" name="mysqlPassword"
             class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
  </div>
  <button onclick="saveMySQLInfo()"
          class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    确认
  </button>
</div>

<!-- Redis 弹窗 -->
<div id="redisModal" class="modal">
  <h2 class="text-xl font-bold mb-4">Redis 信息</h2>
  <div class="space-y-4">
    <div>
      <label for="redisHost" class="block text-sm font-medium text-gray-700">主机</label>
      <input type="text" id="redisHost" name="redisHost"
             class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
    <div>
      <label for="redisPort" class="block text-sm font-medium text-gray-700">端口</label>
      <input type="text" id="redisPort" name="redisPort"
             class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
    <div>
      <label for="redisPassword" class="block text-sm font-medium text-gray-700">密码</label>
      <input type="password" id="redisPassword" name="redisPassword"
             class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
    </div>
  </div>
  <button onclick="saveRedisInfo()"
          class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    确认
  </button>
</div>

<!-- 遮罩层 -->
<div id="overlay" class="overlay"></div>

<!-- 错误对话框 -->
<div id="errorDialog" style="display: none;">
  <button id="closeButton01" class="close_morn">×</button>
  <h3>系统提示</h3>
  <div id="errorMsg"></div>
  <div class="dialog-footer">
    <button id="closeButton" class="btn">关闭</button>
  </div>
</div>

<script src="../static/css/bootstrap.css"></script>
<script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/task.js"></script>

</body>
</html>